<template>
	<view class="sxran-im-talk" >
		<view class="sxran-im-talk-body" :class="{
			'reverse': slef,
		}">
			<view class="sxran-im-talk-avatar">
				<sxran-im-avatar :text='msg.nickname' randomBgColor></sxran-im-avatar>
			</view>
			<view class="sxran-im-talk-content"  @longpress="onLongPress" @click="onLongPress">
				<view class="sxran-im-talk-title">
					<sxran-im-text :align="align" :text='msg.nickname' type='content' :lines="1" size='12'></sxran-im-text>
				</view>
				<view class="sxran-im-talk-message-body">
					<template v-if="msg.type == 'text'">
						<k-text :msg='msg'></k-text>
					</template>
					<template v-else-if="msg.type == 'image'">
						<k-image :msg='msg'></k-image>
					</template>
					<template v-else-if="msg.type == 'video'">
						<k-video :msg='msg'></k-video>
					</template>
					<template v-else-if="msg.type == 'file'">
						<k-file :msg='msg'></k-file>
					</template>
					<template v-else-if="msg.type == 'rich-text'">
						<k-rich-text :msg='msg'></k-rich-text>
					</template>
				</view>
			</view>
		</view>
		<view v-if="showTalkTools" class="sxran-im-talk-tools" :class="{
			'tools-right': slef,
			'tools-left': !slef,
		}">
		<template v-for="(item,index) in talkTools" :key="index">
			<view class="item-tools" v-if='(!slef && item.type !== "revoke") || slef  ' @click="change(item.type)" >
				{{item.name}}
			</view>
		</template>
		</view>
	</view>
</template>

<script>
	import KText from './components/text.vue'
	import KImage from './components/image.vue'
	import KRichText from './components/rich-text.vue'
	import KFile from './components/file.vue'
	import KVideo from './components/video.vue'
	export default {
		name: 'sxran-im-talk',
		components: {
			KText,
			KImage,
			KRichText,
			KFile,
			KVideo
		},
		props: {
			talkType: {
				type: [Number, String],
				default: 0 // 0普通 || 1自己 || 2图片  || 3 视频 
			},
			content: String,
			msg: {
				type: Object,
				default: () => {
					return {}
				}
			}

		},
		data() {
			return {
				talkTools: [{
					icon: 'icon-delete',
					name: '删除',
					type: 'delete',
				}, {
					icon: 'icon-delete',
					name: '撤回',
					type: 'revoke',
				}],
				showTalkTools:false
			}
		},
		computed: {
			align: function() {
				return this.slef ? 'right' : 'left';
			},
			slef: function() {
				return this.msg.from_uid == uni.$Im.getCurrentUserId();
			}
		},
		methods: {
			/**
			 * 
			 * 删除消息
			 */
			deleteMessage(id) {
				
				uni.$Im.deleteMessage({
					msgId: id,
					id
				});
			},
			/**
			 * 
			 * 撤回消息
			 */
			revokeMsg(id) {
				uni.$Im.revokeMsg({
					msgId: id,
					id
				});
			},

			change(type) {
				console.log(this.msg)
				switch (type) {
					case 'delete':
						this.deleteMessage(this.msg.id);
						break;
					case 'revoke':
						this.revokeMsg(this.msg.id);
						break;
					default:
						break;
				}
				this.showTalkTools = false;
			},
			onLongPress(){
				this.showTalkTools = !this.showTalkTools;
			}
		}
	}
</script>

<style scoped lang="scss">
	.sxran-im-talk {
		margin-bottom: $uni-spacing-col-lg;
		padding: $uni-spacing-row-lg;
		position: relative;

		&-tools {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			top: -15px;
			background-color: var(--uni-bg-color);
			padding: $uni-spacing-row-sm $uni-spacing-col-base;
			border-radius: $uni-border-radius-base;

			.item-tools {
				padding: 2px 10rpx;
				flex: 1;
				color: var(--uni-text-color);
				font-size: $uni-font-size-sm;
				position: relative;
				cursor: pointer;
				&:not(:last-child):not(:only-child):before{
					position: absolute;
					content: '';
					right: 0;
					width: 1px;
					height: 100%;
					background-color: var(--uni-border-color);
				}
			}
		}
		.tools-right{
			right: 65px;
		}
		.tools-left{
			left: 65px;
		}

		&::after {
			content: "";
			display: table;
			clear: both;
		}

		.reverse {
			flex-direction: row-reverse;
			float: right;

		}

		.normal {
			flex-direction: row;
		}

		&-body {
			display: flex;
			max-width: 80%;

			.sxran-im-talk-avatar {}

			.sxran-im-talk-content {
				display: flex;
				flex-direction: column;
				margin: 0 $uni-spacing-row-base;

				.sxran-im-talk-title {
					margin-bottom: $uni-spacing-col-sm;
				}

				// .sxran-im-talk-message-content {
				// 	background-color: var(--uni-bg-color-bubble);
				// 	border-radius: $uni-border-radius-lg;
				// 	padding: $uni-spacing-col-lg;
				// 	color: var(--uni-text-color);
				// 	font-size: $uni-font-size-base;
				// 	line-height: 1.6;
				// }
			}
		}
	}
</style>